﻿var lstDepartamentos = null;
var $DeptoID = null;

$(function () {  //document.Ready()
    //Comprobamos si se carga porque retorno errores o si es primera vez que se carga el formulario
    //Bloqueamos la UI, mientras se carga en cache la informacion del sistema
    BlockUI({ title: "Por favor, espere un momento...", message: "Obteniendo los municipios de El Salvador... (1/3)" });
    var $ls = $('#loadingScreen');

    //Hacemos una llamada por medio de AJAX para recuperar todos los municipios disponibles con su respectivo departamento
    $.ajax({ url: "/OPAjax/OP_GetAllMunicipios", type: "POST", cache: true })
                .done(function (data) {
                    //AUTOCOMPLETE, para el campo de MUNICIPIO
                    $('#frm_Municipio').fxAC({ fuente: data.Registros, dependiente: true, field: '#frm_Municipio' });

                    //Actualizamos el mensaje, y solicitamos al servidor todos los paises registrados
                    $ls.text("Obteniendo los paises registrados... (2/3)");
                    $.ajax({ url: "/OPAjax/OP_GetAllPaises", type: "POST", cache: true })
                        .done(function (data) {
                            //AUTOCOMPLETE, para el campo de PAIS
                            $('#frm_Pais').fxAC({ fuente: data.Registros });

                            //Actualizamos el mensaje, y solicitamos al servidor todos los CENTROS EDUCATIVOS MINED registrados
                            $ls.text("Obteniendo los Centros Educativos del MINED... (3/3)");
                            $.ajax({ url: "/OPAjax/OP_GetAllCEducativos", type: "POST", cache: true })
                                .done(function (data) {
                                    //AUTOCOMPLETE, para el campo de CENTRO ESCOLAR PROCEDENCIA
                                    $('#frm_CEProcedencia').fxAC({ fuente: data.Registros, minParam: 5 });

                                    //Desbloqueamos la UI, y mostramos el formulario al usuario
                                    UnBlockUI();
                                    $('article').show();
                                })
                                .fail(eventErrorLoadDataInitial);
                        })
                        .fail(eventErrorLoadDataInitial);
                })
                .fail(eventErrorLoadDataInitial);

    //Creamos la cache de los DEPARTAMENTOS disponibles en el sistema
    lstDepartamentos = [{ value: 1, label: "Ahuachapán" }, { value: 2, label: "Cabañas" }, { value: 3, label: "Chalatenango" },
                                { value: 4, label: "Cuscatlán" }, { value: 5, label: "La Libertad" }, { value: 6, label: "La Paz" },
                                { value: 7, label: "La Unión" }, { value: 8, label: "Morazán" }, { value: 9, label: "San Miguel" },
                                { value: 10, label: "San Salvador" }, { value: 11, label: "San Vicente" }, { value: 12, label: "Santa Ana" },
                                { value: 13, label: "Sonsonate" }, { value: 14, label: "Usulután" }];

    //Establecemos algunos valores por defecto
    $("#sec-cont-grado-especialidad input[name=frm_grado]").filter("[value=1]").prop("checked", true);
    $("#sec-cont-datos-personales input[name=frm_eparvularia]").filter("[value=1]").prop("checked", true);
    $("#sec-cont-datos-situacion-familiar input[name=frm_trabaja]").filter("[value=0]").prop("checked", true);
    $("#sec-cont-datos-situacion-familiar input[name=frm_thijos]").filter("[value=0]").prop("checked", true);

    $('#sec-cont-grado-especialidad input[value="3"]').on('change', function (e) {
        var $selfEspe = $('#frm_especialidad');
        $selfEspe.val('Ciencias Economicas');
        $selfEspe.attr('disabled', 'true');
    });

    $('#sec-cont-grado-especialidad input[value!="3"]').on('change', function (e) {
        var $selfEspe = $('#frm_especialidad')
        $selfEspe.removeAttr('disabled');
    });

    //Aplicamos el control DatePicker a los campos fecha
    $('.form-datepick-control').datepicker({
        buttonImage: "/Content/icon_datepicker.gif",
        showOn: "both",
        minDate: new Date(1970, 1, 1),
        maxDate: new Date(2005, 11, 31)
    });

    //AUTOCOMPLETE, campo DEPARTAMENTO
    $('#frm_Departamento').fxAC({ fuente: lstDepartamentos });

    //Activamos por ultimo el motor de validacion CLIENT-SIDE
    $('form').first().validationEngine();

    $('#btnSendData').on('click', function (event, errorFound) {
        event.preventDefault();
        var $form = $('form');

        //Comprobamos que no existan errores en el formulario
        if (($form.validationEngine('validate') != false) && ($form.valid() == true)) {
            //Habilitamos el ComboBox de especialidades para poder enviar el dato
            var valor = $("input[name='frm_grado']:checked").val();
            if (valor == 3) $('#frm_especialidad').removeAttr('disabled');

            //Eliminamos si tuvieramos un resumen de errores del formulario para limpiar el form
            $('.validation-summary-errors').remove();

            //Bloqueamos la interfaz, mientras se intentan guardar los datos en el servidor
            BlockUI({ message: "Intentando almacenar la solicitud de nuevo ingreso..." });

            //Enviamos los datos por medio de AJAX al servidor
            $.ajax({ url: $form.attr('action'), type: "POST", data: $form.serialize() })
                    .done(function (data) {
                        if (data.success) {
                            alert("Se guardaron correctamente los datos. El No. de su solicitud para nuevo ingreso es: " + data.IDSolicitud);
                        } else {
                            //Construimos nuestro propio ModelStateErrors
                            var $divErr = $('<div class="validation-summary-errors"></div>'),
                                $lista = $('<ul></ul>');
                            $divErr.append('<span>EL FORMULARIO DE DATOS PERSONALES DEL ALUMNO PARA MATRICULA POSEE LOS SIGUIENTES ERRORES</span>');
                            $.each(data.ModelErrors, function (e, k) {
                                $lista.append('<li>' + k.ErrorMessage + '</li>');
                            });
                            $divErr.append($lista);
                            $('article').append($divErr);

                            //Dehabilitamos el ComboBox de especialidades
                            var valor = $("input[name='frm_grado']:checked").val();
                            if (valor == 3) $('#frm_especialidad').attr('disabled', 'true');

                            //Nos vamos directo al final de la pagina para mostrar los errores que se encontraron
                            $("html, body").animate({ scrollTop: $(document).height() }, "slow");
                            $.validator.unobtrusive.parse("form");
                        }
                    })
                    .fail(function (jqXhr, textStatus, errorThrown) {
                        alert("Ocurrio un error de tipo: '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
                    })
                    .always(function () {
                        UnBlockUI();
                    });
        }
    });
});

function eventErrorLoadDataInitial(err) {
    var $divErr = $('<div class="validation-summary-errors"></div>');
    $divErr.append('<span>Lo sentimos, pero ocurrió un error al intentar cargar los datos iniciales de ejecución del formulario de matricula. Intente volver a cargar la pagina (F5), ya que este error se puede deber a la saturación del servidor.</span>');
    UnBlockUI();
    $('article').hide();
    $('#wrap').append($divErr);
}